/*
* Created by: yyf
* Description: 母基金管理--投资中母基金 统计分析
*/
<template>
    <!--列表-->
    <div class="ca-box-border-top-none ca-p-20">
        <el-row class="ca-border-b">
            <el-col :span="11" class="ca-title">
                <h3 class="ca-m-b-10">基金所投项目行业分布</h3>
                <el-table class="ca-table ca-m-b-20" :data="investmentIndustry" show-summary>
                    <el-table-column label="行业" prop="industry">
                        <template slot-scope="scope">
                            {{scope.row.industry | getNameById('industry')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="已投项目数量（个）" prop="itemCount"></el-table-column>
                    <el-table-column label="投资金额（万元）" prop="investment">
                        <template slot-scope="scope">
                            {{scope.row.investment | format1}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12" :offset="1" v-if="investmentIndustry.length">
                <div class="ca-pie-echart" ref="industryCountPie"></div>
                <div class="ca-pie-echart" ref="industryMoneyPie"></div>
            </el-col>
        </el-row>
        <el-row class="ca-border-b ca-m-t-10">
            <el-col :span="11" class="ca-title">
                <h3 class="ca-m-b-10">基金所投项目地域分布</h3>
                <el-table class="ca-table  ca-m-b-20" :data="investmentRegion" show-summary>
                    <el-table-column label="地域" prop="region">
                        <template slot-scope="scope">
                            {{scope.row.region | getRegionName(scope.row.region)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="已投项目数量（个）" prop="itemCount"></el-table-column>
                    <el-table-column label="投资金额（万元）" prop="investment">
                        <template slot-scope="scope">
                            {{scope.row.investment | format1}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12" :offset="1" v-if="investmentRegion.length">
                <div class="ca-pie-echart ca-m-b-20" ref="regionCountPie"></div>
                <div class="ca-pie-echart" ref="regionMoneyPie"></div>
            </el-col>
        </el-row>
        <el-row class="ca-m-t-10">
            <el-col :span="11" class="ca-title">
                <h3 class="ca-m-b-10">基金所投项目轮次分布</h3>
                <el-table class="ca-table" :data="investmentRound" show-summary>
                    <el-table-column label="轮次" prop="round">
                        <template slot-scope="scope">
                            {{scope.row.round | getNameById('prostatus')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="已投项目数量（个）" prop="itemCount"></el-table-column>
                    <el-table-column label="投资金额（万元）" prop="investment">
                        <template slot-scope="scope">
                            {{scope.row.investment | format1}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12" :offset="1" v-if="investmentRound.length">
                <div class="ca-pie-echart ca-m-b-20" ref="roundCountPie"></div>
                <div class="ca-pie-echart" ref="roundMoneyPie"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import echarts from 'echarts';
    export default {
        data() {
            return {
                itemId: this.$route.params.itemId,
                industry: this.$store.state.user.dictionaryMap.industry, //投资方向
                prostatus: this.$store.state.user.dictionaryMap.prostatus, //轮次
                investmentIndustry: [], // 基金所投项目行业分布
                industryNum: [],        // 行业对应的已投项目数量
                industryMoney: [],      // 行业对应的已投金额
                industryName: [],       // 行业对应的行业名字
                industryCountEcharts: null,
                industryMoneyEcharts: null,
                investmentRegion: [],    // 基金所投项目地域分布
                regionNum: [],           // 地域对应的已投项目数量
                regionMoney: [],         // 地域对应的已投金额
                regionName: [],          // 地域对应的地域名字
                regionCountEcharts: null,
                regionMoneyEcharts: null,
                investmentRound: [],     // 基金所投项目阶段分布
                roundNum: [],            // 地域对应的已投项目数量
                roundMoney: [],          // 地域对应的已投金额
                roundName: [],           // 地域对应的地域名字
                roundCountEcharts: null,
                roundMoneyEcharts: null,
            }
        },
        props: {
        },
        mounted() {
            this.getInvestmentIndustry();
            this.getInvestmentRegion();
            this.getInvestmentRound();
        },
        methods: {
            // 获取所投项目 行业 分布
            async getInvestmentIndustry() {
                let {resCode, data} = await apiHttp(api.GET_INVESTMENT_INDUSTRY_LIST, {fundId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.investmentIndustry = data;
                    this.investmentIndustry.map(item=>{
                        this.industry.map(industryItem=>{
                            if (item.industry === industryItem.id) {
                                this.industryName.push(industryItem.name);
                                this.industryNum.push({
                                    value: item.itemCount,
                                    name: industryItem.name
                                });
                                this.industryMoney.push({
                                    value: item.investment,
                                    name: industryItem.name
                                })
                            }
                        })
                    })
                    // 项目数量行业分布
                    let industryCount = {
                        title: { // 头部标题
                            text: '项目数量行业分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.industryName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.industryNum
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    // 项目金额行业分布
                    let industryMoney = {
                        title: { // 头部标题
                            text: '项目金额行业分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.industryName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.industryMoney
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    this.$nextTick(()=>{
                        if (this.investmentIndustry.length > 0) {
                            this.industryCountEcharts = echarts.init(this.$refs.industryCountPie).setOption(industryCount);
                            this.industryMoneyEcharts = echarts.init(this.$refs.industryMoneyPie).setOption(industryMoney);
                        }
                    })
                }
            },
            // 获取所投项目 地域 分布
            async getInvestmentRegion() {
                let {resCode, data} = await apiHttp(api.GET_INVESTMENT_REGION_LIST, {fundId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.investmentRegion = data;
                    // 将id转换成name,拼接省市区
                    this.investmentRegion.map(item=>{
//                        let regionValue = this.getRegionName(item.region);
                        let regionValue = require('@/filters/index').getRegionName(item.region);
                        this.regionName.push(regionValue);
                        this.regionNum.push({
                            value: item.itemCount,
                            name: regionValue
                        });
                        this.regionMoney.push({
                            value: item.investment,
                            name: regionValue
                        })
                    })
                    // 项目数量行业分布
                    let regionCount = {
                        title: { // 头部标题
                            text: '项目数量地域分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.regionName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.regionNum
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    // 项目金额行业分布
                    let regionMoney = {
                        title: { // 头部标题
                            text: '项目金额地域分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.regionName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.regionMoney
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    this.$nextTick(()=>{
                        if (this.investmentRegion.length > 0) {
                            this.regionCountEcharts = echarts.init(this.$refs.regionCountPie).setOption(regionCount);
                            this.regionMoneyEcharts = echarts.init(this.$refs.regionMoneyPie).setOption(regionMoney);
                        }
                    })
                }
            },
            // 获取所投项目 轮次 分布
            async getInvestmentRound() {
                let {resCode, data} = await apiHttp(api.GET_INVESTMENT_ROUND_LIST, {fundId: this.itemId});
                if (resCode === STATUS_HTTP_SUCCESS) {
                    this.investmentRound = data;
                    this.investmentRound.map(item=>{
                        this.prostatus.map(roundItem=>{
                            if (item.round === roundItem.id) {
                                this.roundName.push(roundItem.name);
                                this.roundNum.push({
                                    value: item.itemCount,
                                    name: roundItem.name
                                });
                                this.roundMoney.push({
                                    value: item.investment,
                                    name: roundItem.name
                                })
                            }
                        })
                    })
                    // 项目数量轮次分布
                    let roundCount = {
                        title: { // 头部标题
                            text: '项目数量轮次分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.roundName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.roundNum
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    // 项目金额轮次分布
                    let roundMoney = {
                        title: { // 头部标题
                            text: '项目金额轮次分布',
                            x: 'center',
                            textStyle: {
                                color: '#8B8B7A'
                            }
                        },
                        legend: { // 图例组件
                            data: this.roundName,
                            bottom: 30, //调图例距离底部的距离
                            left: 350, //调图例距离右边部的距离
                            orient: 'vertical' //图例排列方式
                        },
                        series: [{
                            type: 'pie', //图标样式为饼图
                            radius: '62%', //整个饼图的大小
                            center: ['40%', '55%'], //饼图的位置
                            label: {
                                normal: {
                                    formatter: function (obj) {
                                        return obj.percent + '%' //内部只显示百分比
                                    },
                                    //position: 'inside' //显示数据在内部
                                }
                            },
                            data: this.roundMoney
                        }],
                        color: ['#3AB2FF', '#9F5BA4', '#E7541D', '#CC4117', '#FCB42F', '#0DC741', '#006378'] //各个饼图的颜色
                    };
                    this.$nextTick(()=>{
                        if (this.investmentRound.length) {
                            this.roundCountEcharts = echarts.init(this.$refs.roundCountPie).setOption(roundCount);
                            this.roundMoneyEcharts = echarts.init(this.$refs.roundMoneyPie).setOption(roundMoney);
                        }
                    })
                }
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .ca-pie-echart {
        width: 100%;
        height:260px;
        float:left;
        text-align: center
    }
</style>
